import React from 'react'
import {formatAsiaOdd} from "../../game-room/components/Main/index/AsiaOddsTable/AsiaOddsTable";
import {formatDXQOdd} from "../../game-room/components/Main/index/BigSmallTable/BigSmallTable";
import {formatEuroOdds} from "../../game-room/components/Main/index/EuroOddsTable/EuroOddsTable";
import footballSrc from "../../../res/images/web/pro_apply/足球@2x.png";
import moment from "moment";
import {withRouter} from 'react-router-dom'
import {deleteProPlanReq} from "../../../apis/goApis";
import LocalStorageService from "../../../utils/LocalStorageService";
import {GiftMapper} from "../../../utils/constants";

class MyProPlanItem extends React.Component {
    constructor(props) {
        super(props)
        this.uid = LocalStorageService.get('userid')
        this.state = {
            showDeleteButton: false,
            startX: 0,
        }
    }

    onTouchStart(event) {
        if (this.props.isUser) {
            const x = event.touches[0].pageX
            this.setState({
                startX: x,
            })
        }

    }

    onTouchEnd(event) {
        if (this.props.isUser) {
            let endX = event.changedTouches[0].pageX
            let startX = this.state.startX
            let direction = endX - startX < -50
            this.setState({
                showDeleteButton: direction,
            })
        }

    }

    onDelete() {
        if (this.props.planData.Isdelete === 0 && this.props.isUser) {
            deleteProPlanReq({
                Uid: this.uid,
                Schemeid: this.props.planData.id,
            })
                .then((resp) => {
                    if (resp.data.ok === 1) {
                        this.props.onDelete(this.props.planData)
                    }
                })
        }

    }

    render() {
        const data = this.props.planData
        const {
            id,
            name,
            yuceKey,
            Createt,
            Giftorbuy,
            free,
            price,
            Result,
            Isdelete,
        } = data
        const home = data.Zhuname[0]
        const away = data.Kename[0]
        const yuceKeys = {
            'bs': '大小球',
            'asia': '让球',
            'eu': '胜平负',
        }
        const yuceTitle = yuceKeys[yuceKey]
        const oddFormatters = {
            asia: (array) => formatAsiaOdd(array[1]),
            bs: (array) => formatDXQOdd(array[1]),
            eu: (array) => formatEuroOdds(array)
        }
        const showDeleteButton = this.state.showDeleteButton
        const translateX = showDeleteButton ? '-66px' : '0px'
        return <div
            style={{
                background: '#fff',
                position: 'relative',
                overflow: 'hidden',
            }}
            className='mg-b-4px'

        >
            <div
                className='pd-12 flex-space-between'
                style={{
                    width: '100vw',
                    boxSizing: 'border-box',
                    transform: `translateX(${translateX})`,
                    transition: 'all 0.2s',
                }}
                onClick={() => {
                    console.log(this.props.isUser)
                    let end = `./plan-detail?matchId=${data.Namiid}&planId=${id}`
                    if (this.props.isUser === undefined) {
                        end = '.' + end
                    }
                    this.props.history.push(end)
                }}
                onTouchStart={(e) => this.onTouchStart(e)}
                onTouchEnd={(e) => this.onTouchEnd(e)}
            >
                <div className='flex' >
                    <div className='mg-r-6px'>
                        <img src={footballSrc} alt='' style={{width: 16, height: 16,}}/>
                    </div>
                    <div>
                        <div className='mg-b-12px'>
                            <span className='mg-r-4px'>{name}</span>
                            <span className="plan-item-good-at">{yuceTitle}</span>
                        </div>
                        <div className='mg-b-12px flex-align-center'>
                            <span className='ellipsis-text'>{home}</span>
                            &nbsp;
                            <span>vs</span>
                            &nbsp;
                            <span className='ellipsis-text'>{away}</span>
                            <div style={{
                                width: '2px',
                                height: '12px',
                                background: '#F1F1F1',
                                margin: '0 8px',
                            }}/>
                            <span>{oddFormatters[yuceKey](data.Yuce)}</span>
                            {/*<span>{`${home} vs ${away}`}</span>*/}
                        </div>
                        <div>
                            <span className='gray-text'>{`发布于  ${moment(Createt * 1000).format('YYYY年MM月DD日  HH:mm')}`}</span>
                        </div>
                    </div>
                </div>
                <div style={{textAlign: '-webkit-right',}}>
                    <div className='mg-b-12px'>
                        <span className='gray-text no-break' style={{lineHeight: '20px'}}>
                            {free
                                ? `被赏 ${Giftorbuy}`
                                : `已售 ${Giftorbuy}`
                            }
                        </span>
                    </div>
                    <div
                        className='mg-b-12px'
                        style={{
                            width: '30px',
                            height: '16px',
                            background: Result === 0
                                ? ''
                                : Result === 1
                                    ? '#FF4F72'
                                    : '#A4A4A4',
                            marginRight: 0,
                            textAlign: 'center',
                        }}
                    >
                    <span
                        style={{
                            lineHeight: '16px',
                            color: '#fff',
                        }}
                    >
                        {
                            Result === 0
                                ? ''
                                : Result === 1
                                    ? '命中'
                                    : '未中'
                        }
                    </span>
                    </div>
                    <div>
                        {free
                            ? <span>免费</span>
                            : <div className='flex-align-center'>
                                <img alt='' src={GiftMapper['gift_9'].src} style={{width: 20, height: 20, margin: '0 8px 0 20px',}}/>
                                <span>{price}</span>
                            </div>
                        }
                    </div>
                </div>
            </div>

            <div
                style={{
                    position: 'absolute',
                    top: 0,
                    right: -66,
                    width: '66px',
                    height: '98px',
                    background: Isdelete === 1 ? '#A4A4A4' : '#FA7268',
                    color: '#fff',
                    textAlign: 'center',
                    transform: `translateX(${translateX})`,
                    lineHeight: '98px',
                    transition: 'all 0.2s',
                }}
                onClick={() => this.onDelete()}
            >
                删除
            </div>

        </div>
    }
}

export default withRouter(MyProPlanItem)